<script setup lang="ts">
import {ref, reactive, onMounted, defineAsyncComponent} from 'vue'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import { OSM, BingMaps } from 'ol/source'
import 'ol/ol.css'

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import NavigatorRoot from "../components/NavigatorRoot.vue";
import UserIconSvg from "../svg/userIconSvg.vue";
import MapComponent from "../components/MapComponent.vue";
import HeaderTitle from "../components/HeaderTitle.vue";
import MapShow from "../components/MapShow.vue";
import {getUserById} from "../network/userApi.ts";
import {currentRoleIndex, navigatorDict} from "../utils/UserUtils.ts";

console.log("localStorage.getItem(\"currentRoleIndex\"):",localStorage.getItem("currentRoleIndex"))
currentRoleIndex.value = localStorage.getItem("currentRoleIndex") ? localStorage.getItem("currentRoleIndex") : 5
// currentRoleIndex.value = 4

</script>
<template>
<div class="flex flex-col h-full w-full fixed top-0 right-0  bg-gray-2 gap-2">
  <header-title></header-title>
  <div class="flex grow gap-2">
    <component :is="navigatorDict[currentRoleIndex]" class="w-38"></component>
    <map-show class="ml-40"></map-show>
  </div>
</div>

</template>

<style scoped>

</style>